<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>js数值之类型转换</title>
</head>
<body>
  <p>数值之类型转换</p>
  <ul>
    <li>利用Number.isNaN()或Object.is()来判断是否为数值，注意NaN与任何值都不相等，包含它自己</li>
    <li>使用Number()来显式转化其他类型，如：布尔值，字符串，数组，对象</li>
    <li>对布尔值而言，true转化为1，false转化为0</li>
    <li>对字符串而言，除使用Number()外，还可使用parseInt, parseFloat来转化</li>
    <li>对数组而言，空数组转化为0，单值数组转化为该单值(必须为数值或字符串格式的数值)，对多值转化为NaN</li>
    <li>对对象而言，空对象和普通对象都转化为NaN，而实现valueOf且返回数值的对象转化为该数值</li>
  </ul>
  <input type="text" value="30" name="number">
  <script>
    const age = '35years'
    console.log(Number(age))                           // NaN
    console.log(Number(age / 35))                      // NaN
    console.log(Number.isNaN(Number(age)))             // true
    console.log(Object.is(Number(age / 35), NaN))      // true
    if (age !== NaN && NaN !== NaN) {
      console.log('NaN与任何值都不相等，包含它自己')
    }
    // 布尔类型转化为数值
    console.log(Number(true))                          // 1
    console.log(Number(false))                         // 0
    // 字符串(可能来自于表单或后端)转化为数值
    const number = document.querySelector('[name="number"]')
    const value = number.value.trim()
    console.log(typeof value)                         // string
    number.addEventListener('keyup', function () {
      this.value = this.value.trim()
      console.log(Number(this.value), parseInt(this.value), parseFloat(this.value))
    })
    // 数组转化为数值
    const arr = [1], nums = [1, 2, 3]
    console.log(Number([]), Number(arr), Number(nums))       // 0 1 NaN
    // 对象转化为数值
    const obj = { a: 1 }, user = { a: 1, valueOf: function () { return '35' } }
    console.log(Number({}), Number(obj), Number(user))       // NaN NaN 35
  </script>
</body>
</html>